<template>
  <TopMenu/>
  <div class="container user-content">
    <div class="left-side">
      <div class="left-side-item"
           :class="currentType == item['key'] ? 'active' : ''"
           @click="changeTab(index)"
           v-for="(item, index) in leftSideMenu" :key="index">
        {{item.name}}
      </div>
    </div>
    <div class="right-side">
      <section class="right-side-item" v-if="currentType === 'signUp'">
        <MySignUpOrders/>
      </section>
      <section class="right-side-item" v-if="currentType === 'information'">
        <Information/>
      </section>
    </div>
  </div>
</template>

<script setup>
import TopMenu from '@/components/TopMenu/index.vue'
import Information from '@/views/user/information.vue'
import { useRoute } from 'vue-router'
import { ref } from 'vue'
import { getEventOrders } from '@/api/data.js'
import MySignUpOrders from '@/views/user/mySignUpOrders.vue'
const $route = useRoute()
const currentType = ref($route.query.type || 'data')
const leftSideMenu = ref([
  {name: '我的深马', key: 'data'},
  {name: '我的比赛', key: 'competition'},
  {name: '我的报名', key: 'signUp'},
  {name: '我的成绩', key: 'grades'},
  {name: '我的证书', key: 'certificate'},
  {name: '个人信息', key: 'information'},
])

// 切换标签页
const changeTab = (index) => {
  currentType.value = leftSideMenu.value[index]['key']
}
</script>

<style scoped lang="scss">
.user-content {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-top: 30px;
}

.right-side {
  flex: 1;
}

</style>
